<script>
import tdTabbar from "@/components/td-tabbar/td-tabbar.vue";
const app = getApp();
export default {
  components: {
    tdTabbar,
  },
  data() {
    return {
      BestImgUrl: app.globalData.imgurlBwc,
      BestImgUrlTD: app.globalData.imgurl,
      tabbarIndex: 2, // 底部tabbar索引
      tabberHeight: 0, // 底部tabbar高度
      makemoneydata: {},
      Leaderboard: [],
      types: 1,
      current_index: 0,
      InvitationRules: {},
      menuCurrent: 1, // menu菜单索引
      // tabs数据
      menuTabs: [
        {
          name: '小红书',
          id: 1,
          type: 3,
          active: false,
          url: "/money/money_xhs_icon.png"
        },{
          name: '大众点评',
          id: 2,
          type: 1,
          active: true,
          url: "/money/money_dzdp_icon.png"
        },
      ],
      // 平台奖励数据
      platformData: [],
      // 平台奖励活动是否开启
      isPlatformOpen: false,
      // 是否显示报名弹窗
      isShowSignUp: false,
      // 挑战赛第一条数据
      challengeDetail: {},
      isChallengeOpen: false, // 所属地区是否开启挑战赛
      // 是否勾选
      check_on: false,
      // 是否登录
      isToken: false,
    }
  },
  onShow() {
    let that = this
    // that.getguize()
    let token = uni.getStorageSync('token')
    if (!token) {
      that.weidenglu_if = true
      that.makemoneydata = {}
      that.Leaderboard = []
    } else {
      that.weidenglu_if = false
      that.getmakemoney()
      // that.Getmyinfo()
    }
    // 获取平台邀请规则数据
    that.getPlatformInviteRule()

  },
  onLoad() {
    let that = this
    // tabbar的高度
    uni.createSelectorQuery().select('.tabber').boundingClientRect(rect => {
      console.log('tabbar高度==', rect.height)
      that.tabberHeight = rect.height
    }).exec();
    that.getLeaderboard();
    // 获取规则数据
    that.getguize()
    // 加载挑战赛活动列表
    that.getChallengeList()
    // 判断是否登录
    let token = uni.getStorageSync('token')
    if (!token) {
    } else {
      that.isToken = true
    }
  },
  methods: {
    // 底部tabbar 点击事件
    updateTabbar(e){
      console.log('点击e=',  e)
      this.tabbarIndex = e.tabId
    },
    // menu菜单
    clickMenu(e){
      let that = this
      that.menuCurrent = e
      // console.log('menuCurrent=', that.menuCurrent)
      if (e == 1){
        that.menuTabs[0].active = true
        that.menuTabs[1].active = false
        // that.platformData = []
        // 获取平台邀请规则数据
        that.getPlatformInviteRule()
      } else {
        that.menuTabs[0].active = false
        that.menuTabs[1].active = true
        // that.platformData = []
        // 获取平台邀请规则数据
        that.getPlatformInviteRule()
      }

    },
    //获取等级数据
    getguize() {
      let that = this
      that.$api.getInvitationRules({
        page: 1
      }).then(res => {
        that.InvitationRules = JSON.parse(res.data.result.config)
      }).catch(err => {
        /*uni.showToast({
          title: err.data.msg,
          icon: 'none',
          duration: 2000
        });*/
      })
    },
    //获取我的明细
    getmakemoney() {
      let that = this
      that.$api.Getmakemoney({}).then(res => {
        that.makemoneydata = res.data.result

      }).catch(err => {
      })
    },
    tomix() {
      let that = this
      let token = uni.getStorageSync('token')
      if (!token) {
        uni.showModal({
          title: '提示',
          content: '您还未登陆,登录后可查看个人收益',
          confirmColor: '#FF4910',
          confirmText: '去登录',
          success: function (res) {
            if (res.confirm) {

              // #ifdef MP-WEIXIN
              uni.navigateTo({
                url: '/pages/login/login'
              })
              // #endif

            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });

      } else {
        uni.navigateTo({
          url: '/subpackageB/pages/makeMoneyLog/makeMoneyLog',
          animationType: 'pop-in'
        })
      }
    },
    tomix2() {
      let that = this
      let token = uni.getStorageSync('token')
      if (!token) {

        uni.showModal({
          title: '提示',
          content: '您还未登陆,登录即可查看邀请人数',
          confirmColor: '#FF4910',
          confirmText: '去登录',
          success: function (res) {
            if (res.confirm) {

              // #ifdef APP-PLUS
              uni.navigateTo({
                url: '/subpackageB/pages/newAppLogin/newAppLogin'
              })
              // #endif

              // #ifdef H5
              uni.switchTab({
                url: '/pages/me/me'
              })
              // #endif

              // #ifdef MP-WEIXIN
              uni.navigateTo({
                url: '/pages/login/login'
              })
              // #endif

            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });

      } else {
        uni.navigateTo({
          url: '/subpackageB/pages/FriendLog/FriendLog',
          animationType: 'pop-in'
        })
      }

    },
    tomix3() {
      let that = this
      let token = uni.getStorageSync('token')
      if (!token) {

        uni.showModal({
          title: '提示',
          content: '您还未登陆,登录即可查看',
          confirmColor: '#FF4910',
          confirmText: '去登录',
          success: function (res) {
            if (res.confirm) {

              // #ifdef APP-PLUS
              uni.navigateTo({
                url: '/subpackageB/pages/newAppLogin/newAppLogin'
              })
              // #endif

              // #ifdef H5
              uni.switchTab({
                url: '/pages/me/me'
              })
              // #endif

              // #ifdef MP-WEIXIN
              uni.navigateTo({
                url: '/pages/login/login'
              })
              // #endif

            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });

      } else {
        uni.navigateTo({
          url: '/mePages/pages/incomeInfo'
        })
      }

    },
    ToShareposters() {
      let token = uni.getStorageSync('token')
      if (!token) {
        uni.showModal({
          title: '提示',
          content: '您还未登陆,登录后可生成个人专属海报',
          confirmColor: '#FF4910',
          confirmText: '去登录',
          success: function (res) {
            if (res.confirm) {

              // #ifdef APP-PLUS
              uni.navigateTo({
                url: '/subpackageB/pages/newAppLogin/newAppLogin'
              })
              // #endif

              // #ifdef H5
              uni.switchTab({
                url: '/pages/me/me'
              })
              // #endif

              // #ifdef MP-WEIXIN
              uni.navigateTo({
                url: '/pages/login/login'
              })
              // #endif

            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      } else {
        uni.navigateTo({
          url: '/pages/QuanZi/poster',
        })
      }
    },
    getLeaderboard() {
      let that = this
      that.$api.GetLeaderboard({
        type: that.types, //	是	int	1总榜 2月榜 3周榜
        page: 1, //是	int	1页数 默认第一页
        limit: 5 //是	int	每页几条 默认10
      }).then(res => {
        that.Leaderboard = res.data.result
      }).catch(err => {
        /*uni.showToast({
          title: err.data.msg,
          icon: 'none',
          duration: 2000
        });*/
      })
    },
    formattedName(val) {
      let newVal = val.slice(0, 8);
      if (newVal.length <= 2) {
        return '****';
      }
      if (newVal.length > 2) {
        return newVal.substring(0, 2) + new Array(newVal.length).join('*');
      }
    },
    tabsRchange(index) {
      let that = this
      that.cardListidx = index;
      if (index == 0) {
        that.types = 1
        that.getLeaderboard()
        that.current_index = 0
      } else if (index == 1) {
        that.types = 2
        that.getLeaderboard()
        that.current_index = 1
      } else if (index == 2) {
        that.types = 3
        that.getLeaderboard()
        that.current_index = 2
      }
    },
    Toallbangdan() {
      uni.navigateTo({
        url: '/subpackageC/pages/vipInvitationList/vipInvitationList'
      })
    },
    /* 获取平台邀请规则数据 */
    getPlatformInviteRule() {
      let that = this
      that.$api.getRewardRulesAPI().then(res => {
        //console.log('平台邀请规则数据', res.data.result)
        if (res.data.result){
          that.platformData = res.data.result
        }
        console.log('平台邀请规则数据', that.platformData)
        if (that.platformData){
          that.isPlatformOpen = true
        } else {
          that.isPlatformOpen = false
        }
        console.log('是否开启平台邀请', that.isPlatformOpen)
      })
    },
    /* 挑战赛列表 */
    getChallengeList() {
      let that = this
      that.$api.getChallengeActivityListAPI({}).then(res => {
        let data = res.data.result.list
        if (data.length > 0){
          that.isChallengeOpen = true
          data.forEach(item => {
            let nowTime = new Date().getTime()
            let startTime = new Date(item.start_time).getTime()
            let endTime = new Date(item.end_time).getTime()
            if (nowTime < startTime){
              item.isTimeOut = 1
            } else if (nowTime >= startTime && nowTime <= endTime){
              item.isTimeOut = 2
            } else if (nowTime > endTime){
              item.isTimeOut = 3
            }
          })
        }
        // 随机获取一条挑战赛
        that.challengeDetail = data[Math.floor(Math.random() * data.length)]
        console.log('挑战赛列表', that.challengeDetail)
      }).catch(err => {
        uni.showToast({
          title: err.data.msg,
          icon: 'none',
          duration: 2000
        });
      })
    },
    /* 更多挑战赛 */
    ToAllChallenge(){
      uni.navigateTo({
        url: '/subpackageB/pages/moneyChallengeList/moneyChallengeList'
      })
    },
    // 勾选同意规则
    check_icon() {
      if (this.check_on == !0) {
        this.check_on = !1
        this.Lowcheck_on = 1
      } else {
        this.check_on = !0
        this.Lowcheck_on = 0
      }
    },
    /* 挑战赛报名弹窗 */
    goShowSignUp(item){
      console.log('挑战赛详情', item)
      let that = this
      let token = uni.getStorageSync('token')
      // 判断是否登录
      if (!token) {
        uni.navigateTo( {
          url: '/pages/login/login'
        })
        return
      }
      // 重置报名弹窗规则
      this.check_on = 0
      // 显示挑战赛弹窗
      that.isShowSignUp = true
      // 挑战赛详情
      that.challengeDetail = item

    },
    /* 挑战赛免费报名 */
    challengeSignUp(id){
      let that = this
      console.log('check_on', that.check_on)
      if (!that.check_on) {
        uni.showToast({
          title: '请先阅读并同意活动规则',
          icon: 'none',
          duration: 2000
        });
        return
      }
      // 免费报名提交
      that.$api.getJoinChallengeActivityAPI({
        challenge_id: id
      }).then(res => {
        uni.showToast({
          title: res.data.msg,
          icon: 'none',
          duration: 2000
        });
        // 重置报名弹窗规则
        this.check_on = 0
        // 关闭弹窗
        that.isShowSignUp = false
      }).catch(err => {
        uni.showToast({
          title: err.data.msg,
          icon: 'none',
          duration: 2000
        })
      })
    },
    //倒计时计算
    findcountdown(item) {
      const now = new Date().getTime();
      let endTime = new Date(item.end_time).getTime()
      let isend = endTime - now > 0 ? (endTime - now) : 0;
      let seconds = this.$moment(isend).unix();
      // console.log('结束时间', seconds)
      return seconds
    },

    // 倒计时结束后执行
    countDownEndFun(){
      uni.reLaunch({
        url: '/pages/QuanZi/make_money'
      })
      console.log('倒计时结束')
    },
    // 我的报名
    toMyJoin(){
      let token = uni.getStorageSync('token')
      if (!token) {
        uni.showToast( {
          title: '请先登录',
          icon: 'none',
          duration: 2000
        })
        setTimeout(function () {
          uni.navigateTo({url: "/pages/login/login"})
        }, 1500)
      } else {
        uni.navigateTo({url: "/subpackageB/pages/moneyMyChallenge/moneyMyChallenge"})
      }
    },

  }
}
</script>

<template>
  <view class="money">
    <!--<image :src="BestImgUrl + '/poster/bg@2x.png'" style="height: 940rpx;width: 750rpx;position: absolute;top: 0;left: 0;"></image>-->
    <image :src="BestImgUrl + '/money/money_bg01.png'" mode="widthFix" style="height: 3000rpx;width: 750rpx;position: absolute;top: 0;left: 0;"></image>
    <view class="money_content">
      <view style="height: 660rpx"></view>
      <!--我的收益-->
      <view class="my_earnings">
       <!-- <view class="one">
          我的收益
        </view>-->
        <view class="u-flex" style="margin-top: 10rpx">
          <view style="text-align: center;flex: 1" @click="tomix3()">
            <view style="color: #333333;font-size: 28rpx;margin-top: 20rpx">
              ￥
              <text style="font-size: 36rpx">{{ makemoneydata.income_money || '0.00' }}</text>
            </view>
            <view style="color: #999999;font-size: 24rpx;margin-top: 10rpx;text-align: center;margin-left: 10rpx">
              累计奖励
              <u-icon name="arrow-right" color="#999999" size="21"></u-icon>
            </view>
          </view>
          <view style="text-align: center;flex: 1" @click="tomix()">
            <view style="color: #333333;font-size: 28rpx;margin-top: 20rpx">
              ￥
              <text style="font-size: 36rpx">{{ makemoneydata.today_income_money || '0.00' }}</text>
            </view>
            <view style="color: #999999;font-size: 24rpx;margin-top: 10rpx;text-align: center;margin-left: 10rpx">
              今日奖励
              <u-icon name="arrow-right" color="#999999" size="21"></u-icon>
            </view>
          </view>
          <view style="text-align: center;flex: 1" @click="tomix2()">
            <view style="color: #333333;font-size: 28rpx;margin-top: 20rpx">
              <text style="font-size: 36rpx">{{ makemoneydata.all_spread_people_num || '0' }}</text>
            </view>
            <view style="color: #999999;font-size: 24rpx;margin-top: 10rpx;text-align: center;margin-left: 10rpx">
              邀请好友
              <u-icon name="arrow-right" color="#999999" size="21"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <!--探店挑战赛-->
      <view v-if="isChallengeOpen && isToken" class="money_challenge">
        <view class="money_challenge_title">
          <view class="money_challenge_title_left">
            <view class="money_challenge_title_left_text"><image :src="BestImgUrl + '/money/money_img02.png'" mode="heightFix" style="width: 100%;height: 36rpx;"></image></view>
            <view class="money_challenge_title_left_msg">邀请好友越多，获得奖励越多噢~</view>
          </view>
          <view @click="ToAllChallenge()" class="money_challenge_title_right">
            <text>查看更多</text>
            <u-icon name="arrow-right" color="#999999" size="21"></u-icon>
          </view>
        </view>
        <view class="money_challenge_content">
          <view class="challenge_item">
            <view class="challenge_item_img">
              <view class="challenge_item_img_text">
                <text style="font-size: 52rpx">{{ challengeDetail.reward_value ? challengeDetail.reward_value.split('.')[0] : '0' }}</text>
                <text style="font-size: 26rpx">元</text>
              </view>
              <image :src="BestImgUrl + '/money/money_weixin_icon.png'" mode="widthFix" style="width: 100%;height: 100%;"></image>
            </view>
            <view class="challenge_item_content">
              <view class="challenge_item_content_title">
                <view class="challenge_item_content_title_text ellipsis-one-line">{{ challengeDetail.title }}</view>
                <view class="challenge_item_content_title_time">报名日期:{{ challengeDetail.start_time }}至{{ challengeDetail.end_time }}</view>
              </view>
              <view class="challenge_item_content_warp">
                <view class="challenge_item_content_title_msg ellipsis-two-line">{{ challengeDetail.description }}</view>
                <view v-if="challengeDetail.isTimeOut === 2 && challengeDetail.user_challenge_status === 1" class="challenge_item_content_time" style="color: #888888;font-size: 26rpx;text-align: center;">
                  <view style="padding-bottom: 6rpx;">活动倒计时</view>
                  <u-count-down
                      :timestamp="findcountdown(challengeDetail)"
                      @end="countDownEndFun"
                      :show-days="true"
                      :show-seconds="true"
                      :show-border="true"
                      :show-day-colon="true"
                      font-size="26"
                      height="30"
                      color="#FF7900"
                      border-color="transparent"
                      bg-color="transparent"
                      separator="colon"
                      separator-size="20"
                      separator-color="#FF7900">
                  </u-count-down>
                  <!--<view>时间内完成任务</view>-->
                </view>
                <view v-if="challengeDetail.isTimeOut === 1" class="challenge_item_content_cancelBtn">活动未开始</view>
                <view v-if="challengeDetail.isTimeOut === 2 && challengeDetail.user_challenge_status === 0" @click="goShowSignUp(challengeDetail)" class="challenge_item_content_btn">免费报名</view>
                <view v-if="challengeDetail.isTimeOut === 3 && challengeDetail.user_challenge_status === 0" class="challenge_item_content_cancelBtn">活动已结束</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--平台奖励-->
      <view v-if="isPlatformOpen" class="money_platform_rewards">
        <view class="menu_box">
          <view class="menu_box_bg">
            <image v-if="menuCurrent === 1" :src="BestImgUrl + '/money/money_tabs_bg.png'"  style="width: 100%;height: 110rpx;"></image>
            <image v-else :src="BestImgUrl + '/money/money_tabs_bg2.png'"  style="width: 100%;height: 110rpx;"></image>
          </view>
          <view class="menu_box_content">
            <view v-for="(item,index) in menuTabs" :key="index" class="menu_list" :class="menuCurrent==item.id ? 'menu_list_active' : ''" @click="clickMenu(item.id)">
              <image :src="BestImgUrl + item.url" mode="widthFix" style="width: 44rpx;height: 44rpx;"></image>
              <view v-if="item.active == true" class="menu_text" style="color:#3D3D3D">{{ item.name }}</view>
              <view v-else class="menu_text">{{ item.name }}</view>
            </view>
          </view>
        </view>
        <view class="platform_content">
          <view class="platform_title"><image :src="BestImgUrl + '/money/money_img.png'" mode="heightFix" style="width: 100%;height: 100%;"></image></view>
          <view class="platform_subtitle">邀请好友越多，获得奖励越多噢~</view>
          <view class="platform_box">
            <view v-if="menuCurrent == 2" v-for="(item,index) in platformData[3]" :key="index" class="platform_item">
              <view class="platform_item_bg"><image :src="BestImgUrl + '/money/money_item_bg.png'" mode="widthFix" style="width: 100%;height: 140rpx;"></image></view>
              <view class="platform_item_content">
                <view class="platform_item_left">
                  <view class="platform_item_left_t">
                    <text style="font-size: 76rpx;">{{ Number(item.first_order_bonus.split('.')[0]) + Number(item.second_order_bonus.split('.')[0]) }}</text>
                    <text style="font-size: 28rpx;">元</text>
                  </view>
                </view>
                <view class="platform_item_right">
                  <text class="must_tip">必得</text>
                  <view class="platform_item_right_t ellipsis-one-line">
                    <text v-if="index === 0 && item.max_fans == ''" style="font-size: 32rpx;font-weight:bold;">Lv{{ item.min_fans }}</text>
                    <text v-else style="font-size: 32rpx;font-weight:bold;">Lv{{ item.min_fans }}-Lv{{ item.max_fans }}</text>
                  </view>
                  <view class="platform_item_right_t ellipsis-one-line">
                    <u-parse :html="item.describe"></u-parse>
                    <!--<text style="font-size: 28rpx; color: #666666;">邀请1位好友探店，</text>-->
                    <!--<text style="font-size: 28rpx; color: #FF0823;font-weight:bold;">可获得{{ item.first_order_bonus.split('.')[0] || 0 }}元</text>-->
                  </view>
                </view>
              </view>

            </view>
            <view v-if="menuCurrent == 1" v-for="(item,index) in platformData[1]" :key="index" class="platform_item">
              <view class="platform_item_bg"><image :src="BestImgUrl + '/money/money_item_bg.png'" mode="widthFix" style="width: 100%;height: 140rpx;"></image></view>
              <view class="platform_item_content">
                <view class="platform_item_left">
                  <view class="platform_item_left_t">
                    <text style="font-size: 76rpx;">{{ Number(item.first_order_bonus.split('.')[0]) + Number(item.second_order_bonus.split('.')[0]) }}</text>
                    <text style="font-size: 28rpx;">元</text>
                  </view>
                </view>
                <view class="platform_item_right">
                  <text class="must_tip">必得</text>
                  <view class="platform_item_right_t ellipsis-one-line">
                    <text v-if="index === 0" style="font-size: 32rpx;font-weight:bold;">{{ item.min_fans }}粉以上</text>
                    <text v-else style="font-size: 32rpx;font-weight:bold;">{{ item.min_fans }}-{{ item.max_fans }}粉</text>
                  </view>
                  <view class="platform_item_right_t ellipsis-one-line">
                    <u-parse :html="item.describe"></u-parse>
                    <!--<text style="font-size: 28rpx; color: #666666;">邀请1位好友探店，</text>
                    <text style="font-size: 28rpx; color: #FF0823;font-weight:bold;">可获得{{ item.first_order_bonus.split('.')[0] || 0 }}元</text>-->
                  </view>
                </view>
              </view>
            </view>
            <view class="platform_item">
              <view class="platform_item_bg"><image :src="BestImgUrl + '/money/money_item_bg.png'" mode="widthFix" style="width: 100%;height: 140rpx;"></image></view>
              <view class="platform_item_content">
                <view class="platform_item_left">
                  <view class="platform_item_left_t">
                    <text style="font-size: 76rpx;">10</text>
                    <text style="font-size: 28rpx;">元</text>
                  </view>
                </view>
                <view class="platform_item_right">
                  <view class="platform_item_right_t ellipsis-one-line">
                    <text style="font-size: 28rpx;font-weight:bold;">第三单后随机不超10元</text>
                  </view>
                  <view class="platform_item_right_t ellipsis-one-line">
                    <!--<text style="font-size: 28rpx; color: #666666;">邀请1位好友探店，</text>-->
                    <text style="font-size: 28rpx; color: #FF0823;font-weight:bold;">单单可得最高10元</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view @click="ToShareposters()" class="platform_btn_box">
            <view class="circle"></view>
            <image :src="BestImgUrl + '/poster/hands@2x.png'" class="platform_btn_img"></image>
            <view class="platform_btn">点击邀请好友</view>
          </view>
          <view style="height: 30rpx"></view>
        </view>

      </view>

      <!--<view style="position: relative">
        <view style="position: absolute;margin-top: -30rpx">
          <image :src="BestImgUrl + '/poster/link@2x.png'"
                 style="height: 86rpx;width: 20rpx;position: absolute;top: 0;left: 110rpx;"></image>
          <image :src="BestImgUrl + '/poster/link@2x.png'"
                 style="height: 86rpx;width: 20rpx;position: absolute;top: 0;left: 620rpx;"></image>
        </view>
      </view>

      <view
          style="background: linear-gradient( 180deg, #FFF8BB 0%,#FFFFFF 20%, #FFFFFF 50%);
        width: 710rpx;margin-left: 20rpx;border-radius: 20rpx;padding: 56rpx 30rpx 30rpx;margin-top: 20rpx;border:solid 3rpx #ffffff">
        <view class="one">
          挑战赛奖励+邀请奖励至多
          <text style="color:#FA642B ">可获得165元</text>
        </view>
        <view style="color: #999999;font-size: 26rpx;margin-top: 20rpx">邀请好友越多，获得奖励越多噢~</view>
        <view style="position: relative;margin-top: 30rpx;color:#FA642B;min-height: 228rpx">
          <image :src="BestImgUrl + '/poster/tzs.png'"
                 style="width: 650rpx;height: 228rpx;position: absolute"></image>
          <view class="u-flex" style="position: relative;justify-content: flex-start;align-items: flex-start">
            <view style="text-align: center;flex: 1;margin-top: 20rpx;color: #FFF7E0">
              <view style="font-size: 28rpx;font-weight: bold;">
                ￥
                <text style="font-size: 56rpx">50</text>
              </view>
              <view style="font-size: 26rpx;margin-top: 10rpx;text-align: center;">
                挑战赛奖励
              </view>
              <view style="text-align: center;display: flex;justify-content: center">
                <view style="font-size: 24rpx;margin-top: 30rpx;text-align: center;color: #A44509;
              background-color: #FFF0C8;width: 140rpx;height: 44rpx;line-height: 44rpx;border-radius: 30rpx">
                  免费报名
                </view>
              </view>
            </view>
            <view style="text-align: center;flex: 1;">
              <view style="font-size: 28rpx;margin-top: 20rpx;font-weight: bold;">
                ￥
                <text style="font-size: 56rpx">115</text>
              </view>
              <view style="font-size: 26rpx;margin-top: 10rpx;text-align: center;margin-left: 10rpx;color: #333333">
                累计邀请奖励
              </view>
              <view style="font-size: 22rpx;margin-top: 30rpx;text-align: center;margin-left: 10rpx;color: #FF921B">
                邀请越多奖励越多
              </view>
            </view>
            <view style="text-align: center;flex: 1;;margin-left: 10rpx">
              <view style="font-size: 28rpx;margin-top: 20rpx;font-weight: bold;">
                ￥
                <text style="font-size: 56rpx">165</text>
              </view>
              <view style="font-size: 26rpx;margin-top: 10rpx;text-align: center;margin-left: 10rpx;color: #333333">
                共可获得
              </view>
              <view style="font-size: 22rpx;margin-top: 30rpx;text-align: center;margin-left: 10rpx;color: #FF921B">
                挑战赛+邀请奖励
              </view>
            </view>
          </view>
        </view>
      </view>-->
      <!--赚钱排行榜-->
      <view class="rank_list_box">
        <image :src="BestImgUrl + '/poster/topbg@2x.png'" class="rank_list_title_bg" ></image>
        <view class="rank_list_title">
          赚钱排行榜Top3
        </view>
        <view class="u-flex" style="justify-content: space-between;margin:  20rpx 20rpx">
          <view :class="current_index === 0 ? 'select_btn' : 'select_btn_no'" style="text-align: center;"
                @click="tabsRchange(0)">
            总榜
          </view>
          <view :class="current_index === 1 ? 'select_btn' : 'select_btn_no'" style="text-align: center;"
                @click="tabsRchange(1)">
            月榜
          </view>
          <view :class="current_index === 2 ? 'select_btn' : 'select_btn_no'" style="text-align: center;"
                @click="tabsRchange(2)">
            周榜
          </view>
        </view>
        <view v-for="(item,index) in Leaderboard" :key="index">
          <view class="u-flex" style="margin-top: 36rpx">
            <image :src="item.avatar"
                   style="height: 80rpx;width: 80rpx;;border-radius: 60rpx"></image>
            <view style="flex: 1;margin-left: 10rpx;font-size: 28rpx;color: #333333">
              {{ formattedName(item.nickname) }}
            </view>
            <view style="color: #FF6D3A;font-size: 28rpx">{{ item.amount }}元</view>
          </view>
        </view>
        <view v-if="Leaderboard.length === 0" style="text-align: center;margin: 30rpx;font-size: 36rpx;color: #999999">
          "暂无排行榜数据"
        </view>

        <!--        <view class="u-flex" style="margin-top: 36rpx">-->
        <!--          <image :src="BestImgUrl + '/poster/bg@2x.png'"-->
        <!--                 style="height: 80rpx;width: 80rpx;;border-radius: 60rpx"></image>-->
        <!--          <view style="flex: 1;margin-left: 10rpx;font-size: 28rpx;color: #333333">无名指的约定</view>-->
        <!--          <view style="color: #FF6D3A;font-size: 28rpx">326.22元</view>-->
        <!--        </view>-->
        <!--        <view class="u-flex" style="margin-top: 36rpx">-->
        <!--          <image :src="BestImgUrl + '/poster/bg@2x.png'"-->
        <!--                 style="height: 80rpx;width: 80rpx;;border-radius: 60rpx"></image>-->
        <!--          <view style="flex: 1;margin-left: 10rpx;font-size: 28rpx;color: #333333">无名指的约定</view>-->
        <!--          <view style="color: #FF6D3A;font-size: 28rpx">316.22元</view>-->
        <!--        </view>-->

        <view style="color: #cccccc;font-size: 24rpx;margin-top: 20rpx;text-align: center;margin-left: 10rpx"
              @click="Toallbangdan()">
          查看完整榜单
          <u-icon name="arrow-right" color="#cccccc" size="24"></u-icon>
        </view>
      </view>

      <view class="make-img" style="margin: 30rpx 20rpx 20rpx">
        <view class="make-img-box">
          <image :src="BestImgUrl + '/poster/post_bg1@2x.png'" class="make-img-box-bgImg" ></image>
          <image :src="BestImgUrl + '/poster/make_money_img02.png'" class="make-img-box-img box-img1"
                 style="height: 66rpx;width: 230rpx; left: 20rpx;bottom: 16rpx;"></image>
        </view>
        <view class="make-img-box">
          <image :src="BestImgUrl + '/poster/post_bg2@2x.png'" class="make-img-box-bgImg" ></image>
          <image :src="BestImgUrl + '/poster/make_money_img01.png'" class="make-img-box-img box-img2"
                 style="height: 44rpx;width: 120rpx; left: 80rpx;bottom: 30rpx;"></image>
        </view>
      </view>
    </view>
    <view style="padding-bottom: env(safe-area-inset-bottom)"></view>
    <view style="height: 20rpx;"></view>
    <!-- 我的任务按钮，固定在页面右侧 -->
    <view style="width: 128rpx;height: 128rpx;;position: fixed;z-index: 199;right: -20rpx;bottom: 38%;"
          @click="toMyJoin">
      <image style="width: 158rpx;height: 158rpx;;margin: -30rpx" mode="heightFix"
             :src="BestImgUrl + '/money/my_task.png'"></image>
    </view>
    <!--底部tabber-->
    <view class="tabbar_height" :style="{height: tabberHeight + 'px'}"></view>
    <view class="tabber">
      <tdTabbar :tabbarIndex="tabbarIndex" @updateTabbar="updateTabbar" />
    </view>

    <!--免费报名弹窗-->
    <u-popup v-model="isShowSignUp" mode="bottom" :safe-area-inset-bottom="true" closeable border-radius="34" width="90%" height="80%">
      <view class="sign_up_box">
        <view style="height: 30rpx;"></view>
        <scroll-view :scroll-y="true">
          <view class="sign_warp">
            <view class="challenge_item_img">
              <view class="challenge_item_img_text">
                <text style="font-size: 52rpx">{{ challengeDetail.reward_value ? challengeDetail.reward_value.split('.')[0] : 0 }}</text>
                <text style="font-size: 26rpx">元</text>
              </view>
              <image :src="BestImgUrl + '/money/money_weixin_icon.png'" mode="widthFix" style="width: 100%;height: 100%;"></image>
            </view>
            <view class="challenge_item_content">
              <view class="challenge_item_content_title">
                <view class="challenge_item_content_title_text">{{ challengeDetail.title }}</view>
                <view class="challenge_item_content_title_msg">{{ challengeDetail.description }}</view>
              </view>
            </view>
          </view>
          <view style="padding: 20rpx 0;"><u-line color="#F0F0F0"></u-line></view>
          <view class="sign_content">
            <view class="sign_content_warp">
              <view class="sign_content_title">报名须知</view>
              <view class="sign_content_item">
                <text>活动开始时间</text>
                <text>{{ challengeDetail.start_time }}</text>
              </view>
              <view class="sign_content_item">
                <text>活动结束时间</text>
                <text>{{ challengeDetail.end_time }}</text>
              </view>
              <view class="sign_content_item">
                <text>任务完成时长</text>
                <text>{{ challengeDetail.duration }}</text>
              </view>
              <view class="sign_content_item">
                <text>挑战奖励</text>
                <text>{{ challengeDetail.reward_value }}</text>
              </view>
            </view>
            <view style="padding: 20rpx 0;"><u-line color="#F0F0F0"></u-line></view>
            <view class="sign_content_warp">
              <view class="sign_content_title">挑战要求</view>
              <view class="sign_content_item">
                <text>指定城市可参与</text>
                <text>{{ challengeDetail.cityName }}</text>
              </view>
              <view class="sign_content_item">
                <text>指定下单时段</text>
                <text v-if="challengeDetail.apply_start_time">{{challengeDetail.apply_start_time}}-{{challengeDetail.apply_end_time}}</text>
                <text v-else>无限制</text>
              </view>
            </view>
            <view style="padding: 20rpx 0;"><u-line color="#F0F0F0"></u-line></view>
            <view class="sign_content_warp">
              <view class="sign_content_title" style="color: #FE7F08">注意事项</view>
              <view class="sign_content_text">
                <view style="text-align: center;font-size: 40rpx;font-weight: bold;padding: 30rpx 0;">活动规则</view>
                <view>特别提示</view>
                <view>参与活动前，请仔细阅读活动规则的各个条款，特别是与用户违规相关的条款。用户参与本活动即视为已充分阅读、理解本活动规则，并自愿受活动规则的约束挑战赛基本规则</view>
                <view>1. 活动门槛:领食周边购平台正常用户均可参与</view>
                <view>2. 活动奖励规则:</view>
                <view style="color: #fc4106">下单奖励：邀请用户第一次下单邀请方必定获得3元，第二次下单必定获得10元 ，第三次下单后随机奖励至多可获得10元。<br>
                  邀请奖励：若用户在活动期间内邀请2名用户下单，除下单奖励外可额外获得15元，若邀请5名用户下单即可额外获得25元，若邀请8名用户下单即可额外获得35元。<br>
                  PS:邀请奖励为阶梯式奖励，活动过程中领取奖励会根据邀请人数及被邀请用户的下单情况自动发放至账户余额。<br>
                  发放时间：订单完成后次日自动发放至账户余额<br>
                  邀请人最终获得的奖励为下单奖励+邀请奖励<br>
                </view>
                <view>3. 活动周期：本活动七天为一个周期，邀请好友即视为参与活动，活动可结束后可重新参与。</view>
                <view>4. 奖励<text style="color: #fc4106">会根据邀请人数及被邀请用户的下单情况自动发放至账户余额</text>，用户可随时提现。</view>
                <view>5. 活动为领食周边购平台发起，领食周边购为主办方。用户在参与活动及奖励领取和使用期间，用户应严格遵守法律法规的规定，以及《领食周边购用户服务协议》和本规则约定，遵循诚实信用原则，不从事任何违反国家法律法规、违反本规则，或任何扰乱领食周边购平台秩序，违反公序良俗、侵害社会公共利益、他人利益以及活动方利益的行为。若用户存在违规行为(包括但不限于恶意套现、机器作弊、刷信誉、提供虚假信息等)，领食周边购平台有权取消违规用户的参与资格，并收回其已领取现金奖励，必要时追究法律责任。违规行为的禁止用户不得从事任何违规、异常或不正当的行为(以下统称违规行为)，违规行为包括但不限于:</view>
                <view>
                  （1）在领食周边购官方用户群内以任何直接或间接的形式获得团员包括但不限于转发海报、活动链接获得团员等行为;<br>
                  （2）每个新用户只能有一个邀请人，同一个登录账号、同一个手机号同司一个设备或同一提现账户，都视为同一个用户。通过小号作为新用户等作弊手段或利用机制漏洞获得奖励的行为;<br>
                  （3）通过任何不正当手段参与活动，如提供虚假订单、下单后联系商家私下取消订单、找商家返现、恶意退款等;<br>
                  （4）上传虚假截图或者上传他人订单截图，同一订单多次使用等;<br>
                  （5）盗用他人身份、领食周边购账号、提供虚假信息;<br>
                  （6）利用技术漏洞或规则漏洞下单、获取福利、补贴;<br>
                  （7）超出真实的消费需求购买商品;<br>
                  （8）批量或非出于交易目的注册账号、买号、养号;<br>
                  （9）从事其他违反《领食周边购用户服务协议》、活动规则或扰乱平台管理秩序的行为。<br>
                </view>
                <view style="font-size: 32rpx;font-weight: bold;padding: 20rpx 0">违规行为的判定</view>
                <view>您授权并同意，领食周边购平台有权通过风控系统对用户是否存在前述违规行为进行判定，有权依据用户注册/登录信息、用户行为、普通人的正常交易习惯、互联网领域行业惯例、生活常识等大数据进行综合分析评估，并采取如下一种或多种违规处理措施:</view>
                <view>
                  1.判定用户参与挑战赛的相关行为无效，包括但不限于用户自身及骑手、商家等他人原因导致的无效;<br>
                  2.驳回相关交易订单或者超时取消订单;<br>
                  3.限制或取消用户的活动资格;<br>
                  4.不发放奖励或用户已领取(含已使用以及未使用的)的奖励;<br>
                  5.撤销相关交易或活动福利，其他领食周边购平台为维护活动秩序、防止产生损失或依据有关协议/规则而采取的处理措施。请您理解，前述风控系统会随着活动发展、规则演变以及<br>
                  用户异常行为的增加和变化而发生变化，用户接受并认可风控系统对其行为的分析和判定，同时用户认可该系统涉及领食周边购平台的核心商业秘密，使用过程中不得恶意破坏或者窃取其系统信息。<br>
                </view>
                <view style="font-size: 32rpx;font-weight: bold;padding: 20rpx 0">其他说明</view>
                <view>
                  1.如出现不可抗力或情势变更的情况(包括但不限于重大灾害事件、活动受政府机关指令需要停止举办或调整的、活动遭受严重网络攻击或因系统故障需要暂停举办的),则领食周边购平台可依相关法律法规的规定或活动规则的说明主张免责。<br>
                  2.在法律法规允许的范围内，领食周边购平台有权对本活动规则进行变动或调整，相关变动或调整将公布在活动规则页面上，用户继续参与活动则视为同意并接受变动或者调整后的活
                  动规则。如本规则约定与《领食周边购用户服务协议》不一致的，以本规则约定为准;本规则未尽事宜，详见《领食周边购用户服务协议》。用户若对活动规则中的任何条款或活动过程中的相关页面信息有任何疑问的，可咨询客服。若不同意活动规则任何条款或对活动过程中的页面信息(包括活动方变动或调整后的活动规则和页面信息)有异议的，请用户立即停止参与活动。<br>
                  3.本规则条款的标题仅作参考使用，不界定、影响或限定本规则条款的含义、描述及解释。条标与对应条款不一致的，以规则条款约定的内容为准。<br>
                </view>
                <view>
                  本活动由领食周边购平台及各城市运营商主办，最终解释权归领食周边购平台及其城市运营商所有。如有疑问请联系在线专属客服，或邮件与我们联系，邮箱operate@lszbg.com<br>
                  用户参与本活动即视为已充分阅读、理解本活动规则，并自愿受活动规则的约束挑战赛基本规则。<br>
                </view>
              </view>
            </view>
          </view>
          <view class="sign_up_box_btn" :style="{bottom: tabberHeight-10 + 'px'}">
            <view class="sign_up_box_rule">
              <view class="dianji">
                <image @tap="check_icon()" v-if="check_on == !1" class="check_icon"
                       :src="BestImgUrl + '/image/choose_1.png'"></image>
                <image @tap="check_icon()" v-else class="check_icon" :src="BestImgUrl + '/image/choose_2.png'">
                </image>
              </view>
              <view class="sign_up_box_rule_text">
                <text>我已阅读并同意</text>
                <text style="font-weight: bold;color: #3D3D3D;">《领食惠探店挑战赛规则》</text>
              </view>
            </view>
            <view class="sign_up_box_text" @click="challengeSignUp(challengeDetail.id)">立即报名</view>
          </view>
          <!--底部tabbar高度-->
          <view class="tabber_height" :style="{height: tabberHeight-10 + 'px'}"></view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>
<style>
page {
  background-color: #FF2556;
}
</style>
<style scoped lang="scss">
.money{
  width: 100%;
}
.money_content{
  width: 100%;
  position: relative;
  /* 我的收益css */
  .my_earnings{
    // height: 260rpx;
    margin: 0 20rpx 20rpx;
    border-radius: 20rpx;
    border: 6rpx solid #FFDFA8;
    padding: 30rpx;
    background: #FFFCF5;
    .one {
      font-weight: bold;
      font-size: 36rpx;
      color: #3D3D3D;
    }

    .one::after {
      content: "";
      display: block;
      background: linear-gradient(90deg, #FFF077 0%, #fdfcf6 100%);;
      width: 160rpx;
      height: 13rpx;
      border-radius: 30rpx;
      margin-top: -2rpx;
    }

  }
  /* 领食挑战赛css */
  .money_challenge{
    margin: 0 20rpx 20rpx;
    border-radius: 20rpx;
    border: 6rpx solid #FFDFA8;
    padding: 20rpx;
    background: #FFFCF5;
    .money_challenge_title{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;
      .money_challenge_title_left{
        .money_challenge_title_left_text{
          height: 50rpx;
        }
        .money_challenge_title_left_msg{
          font-size: 24rpx;
          color:#666666;
        }
      }
      .money_challenge_title_right{
        display: flex;
        align-items: center;
        color: #888888;
      }
    }
    .money_challenge_content{
      .challenge_item{
        display: flex;
        flex: 1;
        .challenge_item_img{
          width: 108rpx;
          height: 120rpx;
          position: relative;
          .challenge_item_img_text{
            width: 100%;
            height: 72rpx;
            line-height: 72rpx;
            position: absolute;
            top: 0;
            color: #FA642B;
            text-align: center;
          }
        }
        .challenge_item_content{
          flex: 1;
          .challenge_item_content_title{
            width: calc(100% - 150rpx);
            margin-left: 10rpx;
            .challenge_item_content_title_text{
              font-size: 28rpx;
              color: #222222;
              font-weight: bold;
              line-height: 40rpx;
            }
            .challenge_item_content_title_time{
              font-size: 26rpx;
              color: #888888;
            }
          }
          .challenge_item_content_warp{
            margin-left: 10rpx;
            font-size: 26rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .challenge_item_content_title_msg{
              width: calc(100% - 150rpx);
              line-height: 40rpx;
              font-size: 28rpx;
              color: #888888;
            }
            .challenge_item_content_btn{
              width: 140rpx;
              height: 56rpx;
              line-height: 56rpx;
              font-size: 28rpx;
              color: #FFFFFF;
              text-align: center;
              padding: 0 8rpx;
              background: linear-gradient( 90deg, #FD3F03 0%, #FE7F08 100%);
              border-radius: 30rpx;
            }
            .challenge_item_content_cancelBtn{
              width: 140rpx;
              height: 56rpx;
              line-height: 56rpx;
              font-size: 26rpx;
              color: #888888;
              text-align: center;
            }
          }

          .during{
            width: 160rpx;
            height: 110rpx;
            line-height: 30rpx;
            color: #888888;
            background: #FFFFFF;
            border: 2rpx solid #888888;
            padding: 10rpx 0;
          }
        }
      }
    }
  }
  /* 平台奖励css */
  .money_platform_rewards{
    margin: 20rpx;
    /* menu菜单css */
    .menu_box  {
      height: 106rpx;
      position: relative;
      background: #FFBDCC;
      border-radius: 20rpx 20rpx 0 0;
      .menu_box_bg{
        width: 100%;
        height: 110rpx;
      }
      .menu_box_content{
        height: 110rpx;
        line-height: 110rpx;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .menu_list  {
        width: 50%;
        font-size: 32rpx;
        padding: 14rpx 0;
        margin: 0 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .menu_text{
          font-size: 32rpx;
          color:#3D3D3D;
          padding-left: 10rpx;
        }
        .sanJiaoXing{
          width: 0;
          height: 0;
          border-left: 8rpx solid transparent;
          border-right: 0rpx solid transparent;
          border-bottom: 26rpx solid #FF7900;
          position: absolute;
          bottom: 0;
        }
        .icon-arrow-right{
          font-size: 24rpx;
          padding: 4rpx 6rpx;
          border-radius: 12rpx 12rpx 12rpx 0;
          color: #FFFFFF;
          background: #FF7900;
          margin-left: 8rpx;
          font-weight: normal;
        }
        .active_line{
          width: 100%;
          height: 8rpx;
          border-radius: 100rpx;
          position: absolute;
          bottom: 0;
          left: 0;
          background: #000000;
        }
      }
      .menu_list_active{
        color: #FF7900;
      }

    }
    /* platform_content */
    .platform_content{
      border-width: 6rpx;
      border-left: solid;
      border-right: solid;
      border-bottom: solid;
      border-top: none;
      border-color: #FFDFA8;
      border-radius: 0 0 20rpx 20rpx;
      padding: 20rpx 28rpx 0;
      background: #FFFFFF;
      .platform_title{
        height: 36rpx;
        line-height: 36rpx;
        color: #3D3D3D;
        text-align: left;
        margin-bottom: 20rpx;
      }
      /* .platform_title::after {
        content: "";
        display: block;
        background: linear-gradient(90deg, #FFF077 0%, #fdfcf6 100%);;
        width: 160rpx;
        height: 13rpx;
        border-radius: 30rpx;
        margin-top: -2rpx;
      } */
      .platform_subtitle{
        height: 40rpx;
        line-height: 40rpx;
        font-size: 28rpx;
        color: #666666;
        margin-bottom: 30rpx;
      }
      .platform_box{
        .platform_item{
          width: 100%;
          height: 140rpx;
          border-radius: 16rpx;
          margin-bottom: 30rpx;
          position: relative;
          .platform_item_bg{
            width: 100%;
            height: 140rpx;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
          }
          .platform_item_content{
            width: 100%;
            display: flex;
            justify-content: space-between;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
          }
          .platform_item_left{
            width: 190rpx;
            height: 140rpx;
            display: flex;
            justify-content: space-between;
            position: relative;

            .platform_item_left_t{
              width: 100%;
              height: 140rpx;
              line-height: 140rpx;
              text-align: center;
              color: #FFFFFF;
            }
          }
          .platform_item_right{
            width: calc(100% - 190rpx);
            padding: 20rpx;
            position: relative;
            .must_tip{
              width: 80rpx;
              height: 40rpx;
              font-size: 26rpx;
              color: #FFFFFF;
              text-align: center;
              position: absolute;
              top: 0;
              right: 0;
              background: #FF834C;
              border-radius: 0 16rpx 0 16rpx;
            }
            .platform_item_right_t{
              line-height: 50rpx;
            }
          }
        }
      }
      .platform_btn_box{
        width: 100%;
        height: 94rpx;
        position: relative;
        background: #FF6677;
        box-shadow: inset 0rpx 8rpx 24rpx 0rpx #FF6374;
        border-radius: 50rpx;
        .platform_btn_img{
          width: 90rpx;
          height: 90rpx;
          position: absolute;
          right: 100rpx;
          top: 18rpx;
        }
        .platform_btn{
          width: 100%;
          height: 88rpx;
          line-height: 88rpx;
          text-align: center;
          font-size: 36rpx;
          color: #FFE5BA;
          background: linear-gradient( 180deg, #FD7129 0%, #FF0722 100%);
          box-shadow: inset 0 8rpx 24rpx 0 rgba(255,203,99,0.8);
          border-radius: 200rpx 200rpx 200rpx 200rpx;
          margin-top: 30rpx;
        }

      }
    }

  }

  /* 手指动画 */
  .circle {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: pink;
    border-radius: 50%;
    right: 152rpx;
    top: 34rpx;
  }
  .circle:before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    opacity: .4;
    background-color: pink;
    animation: scale 1s infinite cubic-bezier(0, 0, .49, 1.02);
  }
  @keyframes scale {
    0% {
      transform: scale(1)
    }

    50%,
    75% {
      transform: scale(3)
    }

    78%,
    100% {
      opacity: 0
    }
  }

  @keyframes scales {
    0% {
      transform: scale(1)
    }

    50%,
    75% {
      transform: scale(2)
    }

    78%,
    100% {
      opacity: 0
    }
  }
  /* 赚钱排行榜css */
  .rank_list_box{
    background: linear-gradient( 180deg, #fdf9dd 0%, #FFFFFF 50%);
    margin-top: 40rpx;
    position: relative;
    width: 710rpx;
    margin-left: 20rpx;
    border-radius: 20rpx;
    padding: 30rpx;
    border: 6rpx solid #FFDFA8;

    .rank_list_title_bg{
      width: 416rpx;
      height: 68rpx;
      position: absolute;
      top: -26rpx;
      left: calc(50% - 208rpx);
    }
    .rank_list_title{
      height: 50rpx;
      line-height: 50rpx;
      color: white;
      font-weight: 400;
      font-size: 36rpx;
      text-align: center;
      position: relative;
      top: -46rpx
    }
  }
}

.select_btn {
  width: 176rpx;
  height: 60rpx;
  background: linear-gradient( 180deg, #FDB25A 0%, #FE2D24 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  font-size: 28rpx;
  color: #FFFFFF;
  line-height: 60rpx;
}

.select_btn_no {
  width: 176rpx;
  height: 60rpx;
  background: #FFEED9;
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  font-size: 28rpx;
  color: #FF6D3A;
  line-height: 60rpx;
}
// 底部图片
.make-img {
  position: relative;
  display: flex;
  justify-content: space-between;
  .make-img-box{
    position: relative;
    .make-img-box-bgImg{
      height: 160rpx;width: 340rpx;border-radius: 20rpx;
    }
    .make-img-box-img{
      position: absolute;
      z-index: 10;
    }
    .box-img1{
      animation: blink 3s infinite;
    }
    .box-img2{
      animation: blink 4s infinite;
    }
  }
  .left{
    float: left;
  }
  .right{
    float: right;
  }
  @keyframes blink {
    0% {
      opacity: 1; /* 动画开始时不透明 */
    }
    50% {
      opacity: 0; /* 动画中间时完全透明 */
    }
    60% {
      opacity: 1; /* 动画中间时完全透明 */
    }
    100% {
      opacity: 1; /* 动画结束时重新不透明 */
    }
  }
}
/* 免费报名弹窗 */
.sign_up_box{
  padding: 20rpx;
  .sign_warp{
    display: flex;
    .challenge_item_img{
      width: 108rpx;
      height: 120rpx;
      position: relative;
      .challenge_item_img_text{
        width: 100%;
        height: 72rpx;
        line-height: 72rpx;
        position: absolute;
        top: 0;
        color: #FA642B;
        text-align: center;
      }
    }
    .challenge_item_content{
      flex: 1;
      .challenge_item_content_title{
        margin-left: 10rpx;
        .challenge_item_content_title_text{
          font-size: 28rpx;
          color: #222222;
          font-weight: bold;
          line-height: 40rpx;
          margin-bottom: 10rpx;
        }
        .challenge_item_content_title_msg{
          line-height: 40rpx;
          font-size: 28rpx;
          color: #888888;
        }
      }
    }
    .challenge_item_content_warp{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .sign_content{
    padding-bottom: 160rpx;
    .sign_content_warp{
      .sign_content_title{
        font-size: 32rpx;
        line-height: 80rpx;
      }
      .sign_content_item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        color: #666666;
        line-height: 50rpx;
      }
    }
  }
  .sign_up_box_btn{
    height: 210rpx;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 10;
    background: #FFFFFF;
    box-shadow: 0 -2rpx 10rpx 0 rgba(0, 0, 0, 0.1);
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-bottom: env(safe-area-inset-bottom);
    .sign_up_box_rule{
      display: flex;
      align-items: center;
      text-align: center;
      height: 80rpx;

      font-size: 24rpx;
      .check_icon {
        width: 34rpx;
        height: 34rpx;
        position: relative;
        margin-right: 7rpx;
      }
      .sign_up_box_rule_text{
        line-height: 80rpx;
        color: #666666;
        margin-left: 10rpx;
      }
    }
    .sign_up_box_text{
      width: 100%;
      height: 68rpx;
      line-height: 68rpx;
      color: #FFFFFF;
      text-align: center;
      font-size: 28rpx;
      border-radius: 50rpx;
      background: linear-gradient( 180deg, #FE7F08 0%, #FD3F03 100%);
    }
  }
}

</style>